<template>
  <div class="content">
        <transition name="el-fade-in-linear">
            <div class="transition-box" v-show="show">
                <span class="content-content">
                    你须领先于一切离别<br/>
                    仿佛他们全都在你身后<br/>
                    像刚刚失去的冬天<br/>
                    因为许多冬天中有一个无尽的冬天<br/>
                    使你过冬之心终究挨过<br/>
                </span>
                <span class="content-avator">----里尔克</span>
            </div>
          </transition>
  </div>
</template>

<script>
export default {
    name:'HomeContent',
    data() {
        return {
            show:false
        }
    },
    mounted() {
        console.log("log")
        this.show=true
    },
    methods: {
        
    },
}

</script>
<style lang='less' scope>
    .transition-box {
        margin-top: 100px;
        margin-bottom: 10px;
        width: 50%;
        height: 100%;
        border-radius: 4px;
        background-color:rgba(240,240,204,0.1);
        color: #fff;
        box-sizing: border-box;
        margin-left: 25%;
        line-height: 2.5;
        font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        font-weight: bold;
    }
    .content{
        z-index: 1;
        height: 400px;
        position: relative;
    }
    .content-content{
        position: absolute;
        padding-top: 50px;
        padding-left: 15%;
        font-size: 20px;
    }
    .content-avator{
        margin-top: 300px;
        margin-right: 100px;
        font-size: 20px;
        float: right;
    }
</style>